<!-- 偏好设置 -->
<template>
	<view class="preferences">
		<view class="main">
			<view class="first">
				<view class="one">接单偏好</view>
				<view class="two">
					<view v-for="(item,index) in first" class="first_order"
						:class="preferencesData.orderPreference==item.id?'firstChoice':''" :v-model="{item}"
						@click="getFirst(item,index)">
						{{item.name}}
					</view>

				</view>
			</view>
			<view class="distanceShipment">
				<view class="one">距装货地距离（单选）</view>
				<view class="two">
					<view v-for="(item,index) in distanceS" class="first_order"
						:class="preferencesData.loading==item.parameter?'firstChoice':''" :v-model="{item}"
						@click="getDistanceS(item,index)">

						<text v-if="item.parameter==-1">不限</text>
						<text v-else>
							{{item.parameter}}km</text>
					</view>
				</view>
				<view class="distanceUnload">
					<view class="one">距装货地到卸货地距离（单选）</view>
					<view class="two">
						<view v-for="(item,index) in distanceU" class="first_order"
							:class="preferencesData.unload==item.parameter?'firstChoice':''" :v-model="{item}"
							@click="getDistanceU(item,index)">
							<text v-if="item.parameter=='-1'">不限</text>
							<text v-else>
								{{item.parameter}}km</text>
						</view>
					</view>
					<view class="people">
						<view class="one">最多跟车人数（单选）</view>
						<view class="two">
							<view v-for="(item,index) in people" class="first_order"
								:class="preferencesData.followingNumber ==item.parameter?'firstChoice':''"
								:v-model="{item}" @click="getPeople(item,index)">
								<text v-if="item.parameter==0">不跟车</text>
								<text v-else-if="item.parameter==-1">不限</text>
								<text v-else>{{item.parameter}}人跟车</text>
							</view>
						</view>
						<input placeholder="输入其它人数" class="rensu_input" v-model="input1" />
					</view>
					<!-- 	<view class="loveLine">
						<view class="one">偏好路线</view>
						<view class="two" @click="preference=true" style="background-color: #ECF5F6;">
							<view class="contain flx_box" v-if="preference_mood.length>0">
								<view class="loadAdd_title">
									已设{{preference_mood[0].loadAdd}}-{{preference_mood[0].unloadAdd}}</view>
								<view>等{{preference_mood.length}} 条路线</view>
							</view>
							<view class="contain" v-else>暂为设置偏好路线 </view>
							<u-icon name="arrow-right" color="#579AA3" class="icon"></u-icon>
						</view>
					</view> -->
					<!-- <view class="alwaysLine" @click="often=true">
						<view class="one">常去地点</view>
						<view class="two" style="background-color: #ECF5F6;">

							<view class="contain flx_box" v-if="Gooften.length>0">
								<view class="loadAdd_title">已设{{Gooften[0].usualAddress}}</view>
								<view>等{{Gooften.length}}条路线</view>
							</view>


							<view class="contain" v-else>暂为设置常去地点 </view>
							<u-icon name="arrow-right" color="#579AA3" class="icon"></u-icon>
						</view>
					</view> -->
					<view class="timeLove">
						<view class="one">时效偏好（多选）</view>
						<view class="two">
							<view v-for="(item,index) in timeLove" class="first_order"
								:style="item.istag ? 'color:#0094E9;border: 1rpx solid #0094E9;background-color: #E7F5FE;':'border: 1rpx solid #fff;'"
								:v-model="item.name" @click="getLove(item,index)">
								{{item.name}}
								<!-- <image v-show="item.istag" src="@/static/order/tag.png" class="tag"></image> -->
							</view>
						</view>
					</view>
					<view class="otherLove">
						<view class="one">其它偏好（多选）</view>
						<view class="two">
							<view v-for="(item,index) in otherLove" class="first_order"
								:style="item.istag ? 'color:#0094E9;border: 1rpx solid #0094E9;background-color:#E7F5FE;':'border: 1rpx solid #fff;'"
								:v-model="item.name" @click="getOther(item,index)" style="width: 200rpx;">
								{{item.name}}
							</view>
							<input class="qita_input" placeholder="输入自定义偏好" v-model="input2" />
						</view>
					</view>
					<view class="btn" style="display: flex;justify-content: space-between;">
						<view class="congzi_btn" @click="cread()">重置</view>
						<view class="" style="width: 30rpx;"></view>
						<view class="baocun_btn" @click="confirm">保存</view>
					</view>
				</view>

				<!-- <u-popup :show="preference" :round="20" @close='preference=false'>
					<view class="preference_title">
						<view>偏好路线设置</view>
					</view>
					<view class="preference_item">
						<scroll-view scroll-y="true" style="height: 400rpx;">
							<view class="preference_item_box" v-for="(item,i) in preference_mood">
								<view class="">
									<view class="preference_item_box_top">
										<view>
											<view class="preference_item_box_topFlx">
												<view class="preference_item_box_zhuang">装</view>
												<view class="preference_item_box_top_title">{{item.loadAdd}}
												</view>
											</view>
										</view>
									</view>
									<view class="preference_item_box_top" style="margin-top: 42rpx;">
										<view>
											<view class="preference_item_box_topFlx">
												<view class="preference_item_box_zhuang"
													style="background-color: #579AA3;">卸</view>
												<view class="preference_item_box_top_title">{{item.unloadAdd}}
												</view>
											</view>
										</view>
									</view>
								</view>
								<image src="@/static/order/sanchu.png" @click="preference_deilt(item,0)"
									mode="aspectFill" style="width: 40rpx;height: 40rpx;"></image>
							</view>
						</scroll-view>
						<view class="" style="height: 30rpx;"></view>
						<view class="preference_add">
							<view class="preference_add_flx" @click="toRoute">
								<image src="@/static/order/jia.png" mode="aspectFill"></image>
								<view>添加路线</view>
							</view>
						</view>
						<view style="height: 20rpx;"></view>
					</view>
					<view class="preference_button">
						<u-button text="保存设置" color='#00A0E9' class="preference_button_ptao" type='primary'
							@click='preference=false'></u-button>
					</view>
				</u-popup> -->
				<!-- <u-popup :show="often" :round="20" @close='often=false'>
					<view class="preference_title">
						<view>常去地点设置</view>
					</view>
					<view class="preference_item">
						<scroll-view scroll-y="true" style="height: 300rpx;">
							<view class="preference_item_box_top1" v-for="(item,i) in Gooften">
								<view style="margin-left: 15rpx;">
									<view class="preference_item_box_topFlx">
										<view class="preference_item_box_zhuang">装</view>
										<view class="preference_item_box_top_title">{{item.usualAddress}}</view>
									</view>

								</view>
								<image src="@/static/order/sanchu.png" @click="preference_deilt(item,1)"
									mode="aspectFill" style="width: 40rpx;height: 40rpx;margin-right: 30rpx;">
								</image>
							</view>
						</scroll-view>
						<view class="oftenadd">
							<view class="preference_add_flx" @click="toAdd">
								<image src="@/static/order/jia.png" mode="aspectFill"></image>
								<view>添加路线</view>
							</view>
						</view>
						<view style="height: 50rpx;"></view>
					</view>
					<view class="preference_button">
						<u-button text="保存设置" color='#00A0E9' style="background-color: #00A0E9;"
							class="preference_button_ptao" type='primary' @click='often=false'></u-button>
					</view>
				</u-popup> -->

				<u-modal :show="show_modal" @confirm="confirm_modal" @cancel='show_modal=false' :showCancelButton='true'
					:asyncClose="false" title='是否确定删除该偏好路线'></u-modal>
			</view>
		</view>
	</view>
</template>

<script>
	import Header from '@/components/header/header.vue'
	export default {
		data() {
			return {
				preferencesData: {
					unload: '',
					orderPreference: '',
					loading: '',
					followingNumber: "",
					elsePreference: ['1', '2'],
					agingPreference: ['1', '2'],
					motorcycleType: "",
					preferenId: ''
				},
				show_modal: false,
				preference_mood: [],
				Gooften: [],
				show: false,
				preference: false,
				often: false,
				input1: null,
				input2: null,
				setcurrent1: 0,
				setcurrent2: 0,
				setcurrent3: 0,
				setcurrent4: 0,
				setcurrent5: 0,
				first: [{
						name: '抢单优先',
						id: 1,
					},
					{
						name: '派单优先',
						id: 2,
					}
				],
				distanceS: ['不限', '<3km', '<5km', '<8km', '<15km', '<20km', '<30km', '<50km'],
				distanceU: ['不限', '<30km', '<50km', '<100km', '<150km'],
				orderType: ['小面', '中面'],
				people: ['不限', '1人跟车', '2人跟车', '不跟车'],
				timeLove: [{
						name: "即时",
						id: 1,
						istag: false
					},
					{
						name: "预约单",
						id: 2,
						istag: false
					}
				],
				otherLove: [{
						name: "付费搬运单",
						id: 1,
						istag: false
					},
					{
						name: "搭把手搬运单",
						id: 2,
						istag: false
					}
				],
				adress: '',
				delete_cont: 0
			}
		},
		watch: {
			input1(e) {
				if (e) {
					this.preferencesData.followingNumber = ''
				}
			},
		},
		methods: {
			leftClick() {
				this.addCofirm()
				uni.switchTab({
					url: '/pages/getOrder/getOrder'
				})
			},
			preference_deilt(e, i) {
				this.adress = e.id
				this.delete_cont = i
				this.show_modal = true
			},
			async confirm_modal() {
				let res
				if (this.delete_cont == 0) {
					res = await this.$http.order.driver_deleteOrderPreferencesRoute(this.adress)
					if (res.data.code == 200) {
						this.preference_mood.forEach((item, i) => {
							if (item.id == this.adress) {
								this.preference_mood.splice(i, 1)
							}
						})
					}
				} else {
					res = await this.$http.order.driver_deleteUsualAddress(this.adress)
					if (res.data.code == 200) {
						this.Gooften.forEach((item, i) => {
							if (item.id == this.adress) {
								this.Gooften.splice(i, 1)
							}
						})
					}
				}
				this.show_modal = false
			},
			//常去地点设置
			toRoute() {
				uni.navigateTo({
					url: '/subPackages/map/AddRoute/AddRoute'
				})
				this.addCofirm()
			},
			//跳转地址列表
			toAdd() {
				uni.navigateTo({
					url: '/subPackages/order/addAddress/addAddress'
				})
				this.addCofirm()
			},
			//打开偏好路线
			preferenceTap() {
				this.preference = true
			},
			// 切换接单偏好
			getFirst(value, ind) {
				this.preferencesData.orderPreference = value.id
			},
			// 切换装货物距离	
			getDistanceS(value, ind) {
				this.preferencesData.loading = value.parameter
			},
			// 切换卸货物距离
			getDistanceU(value, ind) {
				this.preferencesData.unload = value.parameter
			},
			//选择车辆
			getorderType(value, ind) {
				this.preferencesData.motorcycleType = value.name
			},
			// 跟单人数
			getPeople(value, ind) {
				this.preferencesData.followingNumber = value.parameter
				this.input1 = ''
			},
			// 偏好设置
			getLove(value, ind) {

				if (value.istag) {
					value.istag = false
					this.preferencesData.agingPreference.forEach((item, i) => {
						if (value.id == item) {
							this.preferencesData.agingPreference.splice(i, 1)
						}
					})
				} else {
					value.istag = true
					this.preferencesData.agingPreference.push(value.id)
				}
			},
			// 其他设置
			getOther(value, ind) {
				if (value.istag) {
					value.istag = false
					this.preferencesData.elsePreference.forEach((item, i) => {
						if (value.id == item) {
							this.preferencesData.elsePreference.splice(i, 1)
						}
					})
				} else {
					value.istag = true
					this.preferencesData.elsePreference.push(value.id)
				}
			},
			//追加按钮
			async addCofirm() {
				let that = this
				let cont = {}
				cont = JSON.parse(JSON.stringify(this.preferencesData))

				if (this.input1) {
					cont.followingNumber = this.input1
				}
				if (this.input2) {
					cont.elsePreference.push(this.input2)
				}
				cont.elsePreference = Array.from(new Set(cont.elsePreference))
				//多选类型数据转换
				cont.agingPreference = cont.agingPreference.join(",")
				cont.elsePreference = cont.elsePreference.join(",")
				let res = await this.$http.order.driver_preferenceInformation(cont)
			},
			// 确认按钮
			async confirm() {
				let that = this
				let cont = {}
				cont = JSON.parse(JSON.stringify(this.preferencesData))
				if (this.input1) {
					cont.followingNumber = this.input1
				}
				if (this.input2) {
					cont.elsePreference.push(this.input2)
				}
				cont.elsePreference = Array.from(new Set(cont.elsePreference))
				//多选类型数据转换
				cont.agingPreference = cont.agingPreference.join(",")
				cont.elsePreference = cont.elsePreference.join(",")

				let res = await this.$http.order.driver_preferenceInformation(cont)
				if (res.data.code == 200) {
					this.input2 = ''
					this.input1 = ''
					uni.showToast({
						title: '设置成功',
						icon: 'none',
						success() {
							setTimeout(() => {
								that.cread()
								uni.switchTab({
									url: '/pages/getOrder/getOrder'
								})
							})
						}
					})
				}
			},
			//请亲听单配置
			async cread() {
				let res = await this.$http.order.driver_check()
				if (res.data.data) {
					this.people = []
					this.distanceS = res.data.data.preferenceInfoType.loading
					this.distanceU = res.data.data.preferenceInfoType.unload
					if (res.data.data.orderPreference) {
						this.preferencesData.orderPreference = res.data.data.orderPreference
					} else {
						this.preferencesData.orderPreference = 1
					}

					if (res.data.data.loading) {
						this.preferencesData.loading = res.data.data.loading
					} else {
						this.preferencesData.loading = this.distanceS[0].parameter
					}

					if (res.data.data.unload) {
						this.preferencesData.unload = res.data.data.unload
					} else {
						this.preferencesData.unload = this.distanceU[0].parameter
					}

					this.setcurrent5 = res.data.data.followingNumber

					// this.preferencesData.orderPreference = res.data.data.orderPreference
					// this.preferencesData.loading = res.data.data.loading
					// this.preferencesData.motorcycleType = res.data.data.motorcycleType

					this.preferencesData.preferenId = res.data.data.preferenId
					this.preference_mood = res.data.data.preferencesRoute
					this.Gooften = res.data.data.usualAddress

					//上车人数数据组装
					this.people = res.data.data.preferenceInfoType.followingNumber
					var number = []
					//上车人数数据转换
					this.people.forEach((item, i) => {
						number.push(item.parameter)
					})



					if (res.data.data.followingNumber) {
						if (number.indexOf(this.setcurrent5 + '') == -1) {
							this.input1 = res.data.data.followingNumber
						} else {
							this.preferencesData.followingNumber = res.data.data.followingNumber
						}
					} else {
						this.preferencesData.followingNumber = this.people[0].parameter
					}
					//车辆类型数据组装
					let Type = res.data.data.type
					this.orderType = []
					Type.forEach((item, i) => {
						this.orderType.push({
							name: item,
							show: false
						})
					})



					//偏好设置数据转换	
					let awx = [];
					this.preferencesData.agingPreference = []
					if (res.data.data.agingPreference == null) {
						awx = [];
						this.timeLove.forEach((meth, index) => {
							this.timeLove[index].istag = true
							this.preferencesData.agingPreference.push(meth.id)
						})
					} else {
						awx = res.data.data.agingPreference.split(',');
						awx.forEach((item, i) => {
							this.timeLove.forEach((meth, index) => {
								if (meth.id == item) {
									this.timeLove[index].istag = true
									this.preferencesData.agingPreference.push(meth.id)
								}
							})
						})
					}

					//其他设置数据转换
					let ewx = [];
					this.preferencesData.elsePreference = []
					if (res.data.data.elsePreference == null) {
						ewx = [];
						this.otherLove.forEach((meth, index) => {
							this.otherLove[index].istag = true
							this.preferencesData.elsePreference.push(meth.id)
						})
					} else {
						ewx = res.data.data.elsePreference.split(',');
						ewx.forEach((item, i) => {
							this.otherLove.forEach((meth, index) => {
								if (meth.id == item) {
									this.otherLove[index].istag = true
									this.preferencesData.elsePreference.push(meth.id)
								} else {
									if (i > 1) {
										this.input2 = item
									}

								}
							})
						})
					}

				}

			}
		},
		components: {
			Header
		},
		created() {
			this.cread()
		}
	}
</script>


<style lang="scss" scoped>
	.congzi_btn {
		width: 338rpx;
		height: 92rpx;
		border-radius: 46rpx;
		text-align: center;
		line-height: 92rpx;
		color: #4A4A4A;
		background-color: #F3F3F3;
		font-size: 32rpx;
	}

	.baocun_btn {
		width: 338rpx;
		height: 92rpx;
		border-radius: 46rpx;
		text-align: center;
		line-height: 92rpx;
		color: #fff;
		background-color: #0094E9;
		font-size: 32rpx;
	}

	.loadAdd_title {
		width: 400rpx;
		display: block;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.preference_item_box_zhuang {
		background-color: #019FE8;
		width: 56rpx;
		height: 56rpx;
		border-radius: 100%;
		color: #fff;
		text-align: center;
		line-height: 56rpx;
		font-size: 24rpx;
	}

	.oftenadd {
		width: 710rpx;
		margin-top: 40rpx;
		border-radius: 10rpx;
		background-color: #fff;
		height: 100rpx;
		margin-left: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.preference_button_ptao {
		width: 710rpx;
		height: 110rpx;
		margin-top: 35rpx;
	}

	.preference_button {
		height: 233rpx;
		width: 750rpx;
		background-color: #fff;
	}

	.preference_add_flx image {
		width: 22rpx;
		height: 22rpx;
		margin-right: 15rpx;
	}

	.preference_add_flx {
		display: flex;
		align-items: center;
		color: #999999;
		font-size: 30rpx;
	}

	.preference_add {
		width: 710rpx;
		border-radius: 10rpx;
		background-color: #fff;
		height: 100rpx;
		margin-left: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.preference_item_box_top_number {
		font-size: 28rpx;
		color: #202020;
		font-weight: 600;
	}

	.preference_item_box_top_sumber {
		margin-left: 54rpx;
		font-size: 26rpx;
		color: #777777;
		margin-top: 20rpx;
	}

	.preference_item_box_top_title {
		font-size: 32rpx;
		margin-left: 20rpx;
	}

	.preference_item_box_topFlx {
		display: flex;
		align-items: center;
	}

	.preference_item_box_topFlx image {
		width: 34rpx;
		height: 34rpx;
	}

	.preference_item_box_top1 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		margin-top: 30rpx;
		height: 80rpx;
		width: 710rpx;
		margin-left: 20rpx;
		border-radius: 10rpx;
		padding: 20rpx 0;
	}

	.preference_item_box_top1 image {
		margin-left: 20rpx;
	}

	.preference_item_box_top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		width: 100%;
	}

	.preference_item_box {
		background-color: #fff;
		border-radius: 10rpx;
		width: 670rpx;
		padding: 20rpx;
		border-radius: 10rpx;
		margin: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 30rpx;
		padding-bottom: 30rpx;
	}

	.preference_item {
		background-color: #F6F6F6;
	}

	.preference_title {
		height: 93rpx;
		text-align: center;
		padding-top: 29rpx;
		font-size: 36rpx;
		font-weight: 600;
	}

	.preferences {
		display: flex;
		flex-direction: column;
		width: 100%;
		box-sizing: border-box;
		background-color: #F6F6F6;

		.main {
			width: 100%;
			background-color: #FFFFFF;

			.first,
			.timeLove,
			.otherLove {
				box-sizing: border-box;
				margin: 10upx 0upx;

				.one {
					box-sizing: border-box;
					font-size: 34rpx;
					font-family: PingFang SC;
					font-weight: 900;
					color: #202020;
					margin-left: 40upx;
				}

				.two {
					box-sizing: border-box;
					font-size: 28upx;
					font-family: PingFang SC;
					margin: 40upx;
					display: flex;
					flex-wrap: wrap;
					align-items: center;

					.first_order {
						position: relative;
						width: 200upx;
						height: 70upx;
						color: #666666;
						background-color: #F6F6F6;
						line-height: 70upx;
						text-align: center;
						margin-right: 40upx;
						border-radius: 10upx;


						.tag {
							width: 30upx;
							height: 30upx;
							z-index: 9;
							position: absolute;
							top: -3rpx;
							right: -3rpx;
						}
					}

					.firstChoice {
						color: #0094E9;
						background-color: #E7F5FE;
						border: #0094E9 1rpx solid;
					}

					.loveChoice {
						color: #579AA3;

					}

				}
			}

			.distanceShipment,
			.distanceUnload,
			.orderType,
			.people {
				box-sizing: border-box;
				margin: 10upx 0upx;

				.one {
					box-sizing: border-box;
					font-size: 34rpx;
					font-family: PingFang SC;
					font-weight: 900;
					color: #202020;
					margin-left: 40upx;
				}

				.two {
					box-sizing: border-box;
					font-size: 28upx;
					font-family: PingFang SC;
					margin: 40upx;
					display: flex;
					flex-wrap: wrap;
					align-items: center;
					margin-left: 20rpx;

					.first_order {
						width: 134upx;
						height: 70upx;
						color: #666666;
						background-color: #F6F6F6;
						line-height: 70upx;
						text-align: center;
						margin: 5upx 15upx;
						border-radius: 10upx;
						margin-top: 15rpx;
					}

					.first_order1 {
						padding-left: 10rpx;
						padding-right: 10rpx;
						height: 70upx;
						color: #666666;
						background-color: #F6F6F6;
						line-height: 70upx;
						text-align: center;
						margin: 5upx 15upx;
						border-radius: 10upx;
					}

					.firstChoice {
						color: #0094E9;
						background-color: #E7F5FE;
						border: #0094E9 1rpx solid;
					}
				}
			}

			.loveLine,
			.alwaysLine {
				box-sizing: border-box;
				margin: 10upx 0upx;

				.one {
					box-sizing: border-box;
					font-size: 34rpx;
					font-family: PingFang SC;
					font-weight: 900;
					color: #202020;
					margin-left: 40upx;
				}

				.two {
					box-sizing: border-box;
					font-size: 28upx;
					font-family: PingFang SC;
					margin: 40upx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					border: 1upx solid #579AA3;
					border-radius: 10upx;
					color: #579AA3;
					padding: 10rpx;

					.contain {
						margin-left: 30upx;
					}

					.icon {
						margin-right: 20upx;
					}

				}
			}

			.btn {
				box-sizing: border-box;
				margin: 10upx 40upx;
			}
		}
	}

	.qita_input {
		font-size: 28rpx;
		border-radius: 10rpx;
		border: 1rpx solid #EEEEEE;
		width: 670rpx;
		padding: 0rpx 20rpx;
		margin-top: 20rpx;
		height: 70rpx;
		margin-left: 15rpx;
	}

	.rensu_input {
		font-size: 28rpx;
		border-radius: 10rpx;
		border: 1rpx solid #EEEEEE;
		width: 320rpx;
		padding: 0rpx 20rpx;
		margin-left: 40rpx;
		height: 70rpx;
		margin-bottom: 25rpx;
	}

	.flx_box {
		display: flex;

	}
</style>